<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header::commonlinks(~{::title},~{})">
    <meta charset="UTF-8">
    <title>数据观星</title>
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}">
    <link rel="stylesheet" th:href="@{/dist/css/adminlte.min.css}">

</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">
<div class="wrapper">
    <div th:include="common/header::topnavbar"></div>
    <div th:include="common/header::leftaside(activename='data')"></div>
    <!-- 内容区 -->
    <div class="content-wrapper" >
        <!--内容区头部 -->
        <div class="content-header" >
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">数据观星</h1>
                    </div><!-- /.col -->
<!--                    <div class="col-sm-6">-->
<!--                        <ol class="breadcrumb float-sm-right">-->
<!--                            <li class="breadcrumb-item"><a href="#">根路径</a></li>-->
<!--                            <li class="breadcrumb-item active"> 子路径</li>-->
<!--                        </ol>-->
<!--                    </div>&lt;!&ndash; /.col &ndash;&gt;-->
<!--                </div>&lt;!&ndash; /.row &ndash;&gt;-->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /内容区头部 -->

        <!-- 内容区主体 -->
        <div class="container" style="color: #ff0000;">

            <div class="row">
                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box">
                        <span class="info-box-icon bg-info elevation-1"><i class="fa fa-book"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-number">文章数</span>
                            <span class="info-box-text"style="color: #0a001f"><span th:text="${dataVO.articleNumber}">0</span></span>


                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box mb-3">
                        <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-thumbs-up"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-number">点赞数</span>
                            <span class="info-box-text"style="color: #0a001f"><span th:text="${dataVO.likeNumber}">0</span></span>

                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->

                <!-- fix for small devices only -->
                <div class="clearfix hidden-md-up"></div>

                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box mb-3">
                        <span class="info-box-icon bg-success elevation-1"><i class="fa fa-comment" ></i></span>

                        <div class="info-box-content">
                            <span class="info-box-number">评论数</span>
                            <span class="info-box-text"style="color: #0a001f"><span th:text="${dataVO.commentNumber}">0</span></span>

                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box mb-3">
                        <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-users"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-number">访问量</span>
                            <span class="info-box-text" style="color: #0a001f"><span th:text="${dataVO.clickNumber}">0</span></span>

                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
            </div>

        <div class="row mb-1">
            <div class="col-md-6">
                <!-- Bar chart -->

                <!-- /.card -->

                <!-- Donut chart -->
                <div class="card card-primary card-outline  " style="height: 400px">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="far fa-chart-bar"></i>
                            <div id="year"></div>
                        </h3>

                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="bar-chart" style="height: 300px;"></div>
                    </div>
                    <!-- /.card-body-->
                </div>
                <!-- /.card -->
            </div>

            <div class="col-md-6">

                <div class="card card-danger" style="height: 400px">
                    <div class="card-header">
                        <h3 class="card-title">半年内文章数统计图</h3>

                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="pieChart" ></canvas>
                    </div>
                    <!-- /.card-body -->
                </div>



            </div>
        </div>
        </div>
        <!-- /内容区主体 -->
    </div>
    <!-- /内容区 -->

    <!-- 右侧栏 -->
    <div th:include="~{common/header::rightaside}"></div>
    <!-- /右侧栏 -->
    <!-- 底部栏 -->
    <div th:include="~{common/footer::footer}" ></div>
    <!--所有js必须放在jq下面-->


    <div th:replace="common/header::commonjs(~{::script})">

        <!--        私有的js-->
        <script  th:src="@{/admin/data/index.js}"></script>
        <script type="text/javascript" th:src="@{/plugins/flot/jquery.flot.js}" ></script>
<!--        <script type="text/javascript" th:src="@{/dist/js/adminlte.min.js}" ></script>-->
        <script type="text/javascript" th:src="@{/plugins/flot/data.js}" ></script>
        <script type="text/javascript" th:src="@{/plugins/chart.js/Chart.min.js}" ></script>
<!--        <script>-->


<!--        </script>-->
        <script type="text/javascript">




                var myDate = new Date();
                var y=myDate.getFullYear()+"年评论量统计图"; //获取完整的年份
                document.getElementById("year").innerHTML=y;




        </script>
    </div>
</div>
</body>
</html>